<%@ page language="java"   pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>


<style type="text/css">

.photo
{
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:168px;
    height:200px;
    overflow:hidden;
    background-color:#f8fdff;
    border:4px solid #f3f3f3;
    text-align:center;
    vertical-align:bottom;
    line-height:88px; 
    display:block;
}


.photoTitle
{
    margin-left:auto;
    margin-right:auto;
    display:table;
    padding-top:10px;
    
    *padding-left:15px;
    _padding-left:15px;
}
</style>

<link rel="stylesheet" href="<%=path%>/include/styleBase/css/styleBase.css" />
<link rel="stylesheet" href="<%=path%>/include/styleBase/css/ostable.css" />

<script type="text/javascript" src="<%=path%>/include/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/include/styleBase/js/style.js"></script>

<script type="text/javascript" src="<%=path%>/include/FileUpload/fileUpload.js"></script>

<script type="text/javascript">


function delFile(preSavePath){
    //大照片的路径
	savePath = document.getElementById("myphoto").savePath;
    $.ajax({
		type: "POST", url: "<%=path%>/servlet/FileUploadManagerServlet?method=delImage&filePath="+savePath,
		data:$("#form1").serialize(),
		error:function(){alert("与服务器失去联系，请刷新本页面后再重试！");},
		success: function(msg){
			//页面去除img的属性
			$("#myphoto").attr("src","");
			$("#myphoto").attr("savePath","");
		}
	});
	
	//小照片的路径
	smallPath = document.getElementById("myphoto").smallPath;
	if(smallPath!=""){
		$.ajax({
			type: "POST", url: "<%=path%>/servlet/FileUploadManagerServlet?method=delImage&filePath="+smallPath,
			data:$("#form1").serialize(),
			error:function(){alert("与服务器失去联系，请刷新本页面后再重试！");},
			success: function(msg){
				//页面去除img的属性
				$("#myphoto").attr("src","");
				$("#myphoto").attr("smallPath","");
			}
		});
	}
 }


//上传组件参数初始化
//serverPath属性如果设置compress=true&width=168&height=200，则组件会按照这个尽寸对照片进行压缩
//serverPath属性如果设置compress=true，则组件会对图片按比例压缩，如果不设置compress属性，则不进行压缩
var setting={
	id:"FileUpload",
	swfPath:"<%=path%>/include/FileUpload/FileUploadForHr.swf",
	serverPath:"<%=path%>/servlet/FileUploadManagerServlet?method=savePhoto&compress=true",
	imgPath:"<%=path%>/include/FileUpload/uploadPhoto.jpg",
	width:90,
	height:20,
 	fileSize:"20",
	noFileType:"*.exe",
 	checkAndUploadExtend:checkAndUploadExtend,
 	uploadOnProgressExtend:uploadOnProgressExtend,
 	uploadCompleteExtend:uploadCompleteExtend
};


/*上传文件有效性判断*/
function checkAndUploadExtend(id,serverJson){

	//记录前一次上传的图片的url
	prePhotoSavePath = document.getElementById("myphoto").savePath;
    
	//如果你想获取当前上传组件参数的话
	//var parameters=FU.getSettingById[id];
	if(serverJson.checkType=="all"){
		//各种校验通过,如果你想在文件正式上传前做点什么的话，你就在这做吧！
		//alert("serverJson:"+serverJson);
		
		//$("#fileInfo").html(serverJson.fileName);
		//$("#json1").html(FU.jsonToStr(serverJson));
	}else if(serverJson.checkType=="suffix"){
		//文件后缀名有误
		alert("文件后缀名有误1");
	}else if(serverJson.checkType=="noSuffix"){
		//不允许的后缀名出错
		alert("不允许的后缀名有误1");
	}else if(serverJson.checkType=="size"){
		//文件大小有误
		alert("文件大小超过限制,请上传20以内的附件.");
	}
}

/*文件上传进度控制*/
function uploadOnProgressExtend(id,serverJson){
	var percentFormat=Math.floor(serverJson.percent*100);
	//$("#json2").html(FU.jsonToStr(serverJson));
	//$("#perspan").html(percentFormat+"%");
}

/*文件上传成功后，将服务器返回值返回到页面*/
function uploadCompleteExtend(id,serverJson){
	//如果你想在文件上传结束后做点什么的话，你就在这做吧！
	var imageObj = eval("("+serverJson+")");
	alert("返回文件名："+imageObj.fileName);//返回文件名
	alert("返回照片相对路径："+imageObj.imgPath);//返回照片相对路径
	//返回压缩后照片的相对路径,如果参数初始化setting中serverPath项设置了width和height,则后台会返回压缩后照片的相对路径
	alert("返回压缩后照片的相对路径："+imageObj.smallImgPath);
	
	//页面读取大照片的url
	var imagurl = '<%=path%>/servlet/FileUploadManagerServlet?method=showImage&imgPath='+imageObj.imgPath;
	
	//也可以读取小照片的url
	var smallimag = '<%=path%>/servlet/FileUploadManagerServlet?method=showImage&imgPath='+imageObj.smallImgPath;
	
	
	//设置img的src属性
	if(imageObj.smallImgPath!=""){
		$("#myphoto").attr("src",smallimag);
	}else{
		$("#myphoto").attr("src",imagurl);
	}
	
	//在页面记录大照片的路径,方便取消上传时从页面用ajax删除大照片
	$("#myphoto").attr("savePath",imageObj.imgPath);
	
	//在页面记录小照片的路径,方便取消上传时从页面用ajax删除小照片
	$("#myphoto").attr("smallPath",imageObj.smallImgPath);
	
}




</script>

</head>


<body style="background-color:white;">


<form action="" method="post" name="_form">
       <div id="uploadDiv"></div>
</form>


<div class="stepBar">
   	<table cellpadding="0" cellspacing="0" border="0">
       	<tr>
       		<td class="stepImg"><img id="tt" src="<%=path%>/include/styleBase/images/da1.jpg"/></td><td>上传照片</td>
       	</tr>
   	</table>
</div>




<div style="text-align:center;">

	<div id="carImageDiv" class="photo">
		<span id="perspan"></span>
		<img id="myphoto" name="myphoto" savePath="" smallPath="" alt="" width="168" height="200" src="<%=path%>/servlet/FileUploadManagerServlet?method=showImage&imgPath=&defPath=nobody.gif" style="border: 0px;" />
	</div>
	
	<div class="photoTitle">
		图片尺寸(宽:168px 高:200px)
		<br />
		<br />
		<script>
		//调用上传组件
		FU.iniFlashPlayer(setting);
		</script>
		<a href="#2011" onclick="delFile();">取消上传</a>
		<br />
	</div>
</div>


</body>
</html>





